<template>
	<view class="content">
		<view class="head">
			<view class="searchbg">
				<u-search :inputStyle="{width:'500rpx'}" margin="8rpx 24rpx" :actionStyle="{height:'56rpx','line-height':'56rpx','border-radius':'28rpx','margin-right':'8rpx',background:'#3CC882',color:'#fff'}" :searchIcon="require('@/static/images/search.png')" placeholderColor="#6F7A85" bgColor="#fff" placeholder="搜索食材或菜品名称" clearabled v-model="keyword"></u-search>
			</view>
			<view class="sift">
				<view class="left">
					<view class="item">
						<view class="icon">
							<image src="@/static/images/money.png" mode=""></image>
						</view>
						<view class="text">可买食材</view>
						<view class="jt">
							<image src="@/static/images/bottom.png" mode=""></image>
						</view>
					</view>
					<view class="item">
						<view class="text">综合排序</view>
						<view class="jt">
							<image src="@/static/images/bottom.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="text">筛选</view>
					<view class="icon">
						<image src="@/static/images/sift.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="Waterfall">
			<view class="item" v-for="item in list"  :key="item.id">
				<view class="img">
					<image :src="item.img" mode="widthFix"></image>
				</view>
				<view class="title">
					<view class="icon" v-if="item.iconShow">
						<image src="@/static/images/money.png" mode=""></image>
					</view>
					{{item.title}}
				</view>
				<view class="desc">
					{{item.timedesc}} | {{item.desc}}
				</view>
				<view class="btm">
					<view class="left">
						<view class="avatar">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="uname">{{item.uname}}</view>
					</view>
					<view class="right">
						<view class="heart">
							<image v-if="item.heart" src="@/static/images/heart.png" mode=""></image>
							<image v-else src="@/static/images/heart-active.png" mode=""></image>
						</view>
						<view class="number">{{item.number}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Mock from "@/uni_modules/mockjs"
	export default {
		data() {
			return {
				keyword:"",
				list:[]
			}
		},
		onLoad() {
			this.getList()
			console.log(this.list);
		},
		methods:{
			getList(){
				let list = Mock.mock({
					"list|10":[{
						"id|+1":1,
						"img":function(){
							return "https://www.dmoe.cc/random.php?time="+Date.now()/2+this.id
						},
						"title":"@ctitle(10,25)",
						"iconShow|1-2": true,
						"type|0-1":0,
						"timedesc":"@cword(3,5)",
						"desc":"@cword(3,5)",
						"uname":"@cname(2,4)",
						"avatar":function(){
							return "https://www.dmoe.cc/random.php?time="+Date.now()/2+this.id
						},
						"heart|1-2":true,
						"number|100-1000":100
					}]
				}).list
				this.list = this.list.concat(list)
			}
		},
		onReachBottom() {
			this.getList();
		}
	}
</script>

<style lang="scss">
	.content{
		font-size: 26rpx;
		.head{
			padding: 40rpx 0 0;
			background: #fff;
			.u-search{
				width: 530rpx;
				height: 72rpx;
				border: 1rpx solid #3CC882;
				border-radius: 36rpx;
			}
			.sift{
				display: flex;
				justify-content: space-between;
				margin: 26rpx ;
				.left{
						display: flex;
						align-items: center;
					.item{
						display: flex;
						align-items: center;
						margin-right: 48rpx ;
						.icon{
								width: 32rpx;
								height: 32rpx;
								margin: 0 4rpx;
							image{
								width: 32rpx;
								height: 32rpx;
							}
						}
						.text{}
						.jt{
							width: 32rpx;
							height: 32rpx;
							image{
								width: 32rpx;
								height: 32rpx;
							}
						}
					}
				}
				.right{
					display: flex;
					align-items: center;
					height: 36rpx;
					line-height: 36rpx;
					border-radius: 26rpx;
					padding: 8rpx 24rpx;
					border: 1rpx solid #E5E5E5;
					.text{}
					.icon{
						height: 24rpx;
						width: 30rpx;
						image{
							height: 24rpx;
							width: 30rpx;
						}
					}
				}
			}
		}
		.Waterfall{
			width: calc(100% - 48rpx);
			background: #F5F7F6;
			padding: 0 24rpx;
			column-count: 2;
			column-gap: 24rpx ;
			.item{
				background: #fff;
				border-radius: 24rpx;
				margin-top: 22rpx;
				overflow: hidden;
				page-break-inside: avoid;
				.img{
					width: 100%;
					max-height: 400rpx;
					overflow: hidden;
					image{
						min-height: 200rpx;
						width: 100%;
					}
				}
				.title{
					margin: 16rpx;
					font-size: 28rpx;
					font-weight: bold;
					display: -webkit-box;
					overflow: hidden;  
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					.icon{
						display: inline-block;
						image{
							display: inline-block;
							height: 32rpx;
							width: 32rpx;
							margin: 0 5rpx;
							vertical-align: middle;
						}
					}
				}
				.desc{
					margin: 0 16rpx;
				}
				.btm{
					display: flex;
					justify-content: space-between;
					margin: 16rpx;
					.left,
					.right{
						display: flex;
						align-items: center;
					}
					.avatar{
						width: 32rpx;
						height: 32rpx;
						margin: 0 5rpx;
						border-radius: 16rpx;
						image{
							width: 32rpx;
							height: 32rpx;
							border-radius: 16rpx;
						}
					}
					.heart{
						image{
							width: 32rpx;
							height: 32rpx;
							vertical-align: middle;
							margin: 0 3rpx 2rpx;
						}
					}
				}
			}
		}
	}
	
</style>
